<template>
    <div>
      <div class="" style="display: flex; flex-direction: column; width: 100%">
        <el-form size="small" :inline="true" class="">
          <div class="top">
            <el-form-item label="视频名称">
              <el-input v-model="listpage.videoName" placeholder="请输入视频名称"></el-input>
            </el-form-item>
            <el-form-item label="活动名称">
              <el-input v-model="listpage.actionName" placeholder="请输入活动名称"></el-input>
            </el-form-item>
            <el-form-item label="" style="margin-left: 100px">
              <el-date-picker v-model="listpage.start" type="date" placeholder="选择日期">
              </el-date-picker>
              <el-date-picker v-model="listpage.end" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button size="small" type="primary" icon="el-icon-search" @click="getlist()">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table :data="tablelist" style="width: 100%">
        <el-table-column prop="video_name" label="视频名称"></el-table-column>
        <el-table-column prop="title" label="活动名称">
        </el-table-column>
        <el-table-column prop="synthesis_num" label="合成个数"></el-table-column>
        <el-table-column prop="success_num" label="成功个数"></el-table-column>
        <!-- <el-table-column prop="task_id" label="合成信息"> </el-table-column> -->
        <el-table-column prop="task_id" label="合成流水号"></el-table-column>
        <el-table-column prop="end_time" label="结束时间"></el-table-column>
        <el-table-column prop="user.user_name" label="创建用户">
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">正常</span>
            <span v-else>完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="删除">
          <template slot-scope="scope">
            <el-popconfirm @confirm="handleRowDelete(scope.row)" title="这是一段内容确定删除吗？">
              <!-- <el-button slot="reference">删除</el-button> -->
              <el-button type="danger" size="mini" slot="reference">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
  
        <!-- <el-table-column prop="store_name" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.card_type == 1" style="color: green;"
                >礼品</span
              >
              <span v-else-if="scope.row.card_type == 2" style="color: brown;"
                >满减</span
              >
              <span v-else-if="scope.row.card_type == 3" style="color: brown;"
                >团购</span
              >
              <span v-else-if="scope.row.card_type == 4" style="color: brown;"
                >立减</span
              >
            </template>
          </el-table-column>
          <el-table-column prop="store_name" label="图片" width="180">
            <template slot-scope="scope">
              <div v-if="scope.row.card_img">
                <img
                  style="width: 50px;height: 50px;"
                  :src="scope.row.card_img"
                  alt=""
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="write_off_pwd" label="核销密码"> </el-table-column>
          <el-table-column prop="limit" label="单人总限额"> </el-table-column>
          <el-table-column prop="day_limit" label="单人每天限领"> </el-table-column>
          <el-table-column prop="num" label="库存"> </el-table-column>
          <el-table-column prop="delete_time" label="到期时间"> </el-table-column>
          <el-table-column prop="operator.real_name" label="操作用户">
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间"> </el-table-column>
          <el-table-column prop="store_name" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status == 1" style="color: green;">正常</span>
              <span v-else style="color: brown;">弃用</span>
            </template>
          </el-table-column>
          <el-table-column prop="store_name" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="activity(scope.row)"
                >更新</el-button
              >
            </template>
          </el-table-column> -->
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listpage.page"
        :page-sizes="[10, 20, 30, 40]" :page-size="listpage.per_page" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  
      <!-- 新增活动对话框********************************************************** -->
      <el-dialog title="新增卡券" :visible.sync="adddialogVisible" width="30%">
        <!-- 新增表单 -->
        <el-form ref="form" :model="addform" label-width="80px" :rules="addrules">
          <el-form-item label="选择商户">
            <el-select v-model="addform.merchant_id" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="卡券名称">
            <el-input v-model="addform.card_name" placeholder="卡券名称 例: 寿司9折券"></el-input>
          </el-form-item>
          <el-form-item label="活动规则">
            <el-input :autosize="{ minRows: 2, maxRows: 10 }" v-model="addform.action_introduce"
              placeholder="活动规则 例: 全场小费满200元,并参与抖音推广活动!!(非必填)"></el-input>
          </el-form-item>
          <el-form-item label="卡券图标">
            <el-row>
              <el-button type="primary" @click="openUpload">选择图片</el-button>
              <div v-if="addform.card_img != ''" class="img">
                <img :src="addform.card_img" width="100" height="100" />
              </div>
            </el-row>
          </el-form-item>
          <el-form-item label="卡券类型">
            <el-select v-model="addform.card_type" placeholder="请选择">
              <el-option v-for="item in optionse" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="核销密码">
            <el-input v-model="addform.write_off_pwd" placeholder="核销密码 例： 1234(不用设置太复杂)"></el-input>
          </el-form-item>
          <el-form-item label="单人总限领">
            <el-input v-model="addform.limit" placeholder="单人限领数量 例: 1"></el-input>
          </el-form-item>
          <el-form-item label="单人每天限领">
            <el-input v-model="addform.day_limit" placeholder="单人每天限领数量 例: 1"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="addform.num" placeholder="库存 例: 1000(领完即止)"></el-input>
          </el-form-item>
          <el-form-item label="结束日期">
            <el-date-picker v-model="addform.card_end_time" value-format="yyyy-MM-dd" format="yyyy-MM-dd" style="width: 80%"
              type="date" placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="adddialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <el-dialog title="活动二维码" :visible.sync="dialogVisible" width="30%">
        <el-form>
          <el-form-item label="犇犇支付">
            <img style="width: 100px; height: 100px" src="" alt="" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!--上传图片组件-->
      <Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片
      </Upload>
    </div>
  </template>
  
  <script>
  // import request from "@/utils/request";
  // import Upload from "@/components/file/Upload";
  
  export default {
    components: {
     
    },
  
    data() {
      return {
        id: "",
        ischange: false,
        /*是否上传图片*/
        isupload: false,
        type: "",
        options: [
          {
            value: "宁波天钧伯爵科技有限公司",
            label: "宁波天钧伯爵科技有限公司",
          },
        ],
        optionse: [
          {
            value: "1",
            label: "礼品",
          },
          {
            value: "2",
            label: "满减",
          },
          {
            value: "3",
            label: "团购",
          },
          {
            value: "4",
            label: "立减",
          },
        ],
        value: "宁波天钧伯爵科技有限公司",
        addrules: {},
        addform: {
          merchant_id: "",
          action_introduce: "",
          card_name: "",
          card_img: "",
          card_type: "",
          write_off_pwd: "",
          limit: "",
          day_limit: "",
          num: "",
          card_end_time: "",
        },
        adddialogVisible: false,
        dialogVisible: false,
        total: 0,
        tablelist: [],
        listpage: {
          page: 1,
          per_page: 10,
          videoName: "",
          actionName: "",
          start: "",
          end: "",
        },
        /*是否打开添加弹窗*/
        open_add: false,
      };
    },
    watch: {
      adddialogVisible: function (a) {
        if (a == false) {
          let arr = {
            user_id: "",
            store_name: "",
            store_address: "",
            homepage_id: "",
            store_logo: "",
            poiId: "",
            openid: "",
            nickname: "",
          };
          this.addform = arr;
  
          this.ischange = false;
        }
      },
    },
    created() {
      this.getlist();
    },
    methods: {
      // 删除一条表格数据
      async handleRowDelete(row) {
        // console.log(row);
        // try {
        //   let res = await request._post(
        //     "/shop/video.synthesis_log/delsylogList",
        //     {
        //       id: row.id,
        //     }
        //   );
        //   console.log(res);
        //   await this.getlist();
        // } catch (error) {
        //   console.log(error);
        // }
      },
  
      // 核销
      async abandon(id) {
        // let res = await request._post("/shop/video.exposure/writeOff", {
        //   userCouponId: id,
        // });
        // if (res.code == 1) {
        //   this.$message.success("核销成功");
        //   this.getlist();
        // } else {
        //   this.$message.error(res.msg);
        // }
      },
      // 添加商铺
      async onSubmit() {
        if (!this.ischange) {
          var res = await request._post("/shop/video.coupons/add", this.addform);
        } else {
          var res = await request._post("/shop/video.coupons/edit", this.addform);
        }
        console.log("添加商铺", res);
        if (res.code == 1) {
          this.getlist();
          this.adddialogVisible = false;
          this.$message.success("添加成功");
        }
      },
      // 打开活动详情对话框
      opendetail() {
        this.dialogVisible = true;
      },
  
      async getlist() {
        let res = await request._post(
          "/shop/video.synthesis_log/index",
          this.listpage
        );
        console.log("列表", res);
        if (res.code == 1) {
          this.tablelist = res.data.data;
          this.total = res.data.total;
        }
      },
  
      handleSizeChange(val) {
        this.listpage.per_page = val;
        this.getlist();
      },
      handleCurrentChange(val) {
        this.listpage.page = val;
        this.getlist();
      },
  
      // 打开弹出框
      activity(e, type) {
        delete e.operator;
        delete e.create_time;
        delete e.update_time;
        delete e.delete_time;
        this.id = e.id;
        delete e.id;
        delete e.operator_id;
        delete e.status;
        delete e.app_id;
        // 打开弹出框
        if (type != 1) {
          this.addform = e;
          this.addform.coupons_id = this.id;
          this.ischange = true;
        }
  
        this.adddialogVisible = true;
        console.log("this.addform", this.addform);
      },
      // 关闭添加
      closeAdd(e) {
        console.log(e, "罐体添加属性");
        this.open_add = false;
      },
  
      /*获取图片*/
      returnImgsFunc(e) {
        if (e != null && e.length > 0) {
          this.addform.card_img = e[0].file_path;
        }
        console.log("获得图片", this.addform.card_img);
        this.isupload = false;
      },
      openUpload(e) {
        this.type = e;
        console.log("type", e);
        this.isupload = true;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .bottom {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: center;
    background-color: #3276b1;
    cursor: pointer;
  
    span {
      font-size: 20px;
      color: white;
    }
  }
  
  .bottom:hover {
    background-color: #275b89;
  }
  </style>
  